<template>
    <div class="enterpriseIn">
        <ul>
            <li class="title">欢迎入驻同城鲜花配送平台</li>
            <li class="title">感谢您对本站的认可，在这里您将收获更多的客户来源，和免费的店铺宣传！！！！</li>
            <li class="title">接下来请让我们了解一下店铺的一些基本信息</li>
        </ul>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="注册账号：" prop="username">
                        <el-input placeholder="请输入内容" v-model="ruleForm.username" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="注册密码：" prop="password">
                        <el-input placeholder="请输入内容" v-model="ruleForm.password" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="店铺名称：" prop="name">
                        <el-input placeholder="请输入内容" v-model="ruleForm.name" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="店铺开业时间：" prop="registerDate">
                        <el-date-picker
                                v-model="ruleForm.registerDate"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                clearable>
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="联系人：" prop="contact">
                        <el-input placeholder="请输入内容" v-model="ruleForm.contact" maxlength="20" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话：" prop="contactPhone">
                        <el-input placeholder="请输入内容" v-model="ruleForm.contactPhone" maxlength="11"
                                  clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="入驻城市：" prop="inCity">
                        <el-select v-model="ruleForm.inCity" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in cityList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item label="详细地址：" prop="address">
                        <el-select
                                style="width: 100%"
                                @change="addressChange"
                                v-model="ruleForm.address"
                                filterable
                                clearable
                                remote
                                placeholder="请输入关键词"
                                :remote-method="remoteMethod"
                                :loading="loading">
                            <el-option
                                    v-for="(item,i) in addList"
                                    :key="i"
                                    :label="item.title+'-'+item.address"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                        <input type="text" id="suggestId" v-model="text" v-show="false">
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="">
                        <div id="container" style="width: 100%;height: 300px"></div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="营业执照：" prop="licenseFile">
                        <el-upload
                                class="avatar-uploader"
                                action="#"
                                :auto-upload="false"
                                :show-file-list="false"
                                :on-change="onChange">
                            <img v-if="licenseImg" :src="licenseImg" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="店铺图片：">
                      <el-upload
                              :key="key"
                              :auto-upload="false"
                              list-type="picture-card"
                              :on-change="listOnChange"
                              :limit="8"
                              :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div style="width: 100%;text-align: center;padding-bottom: 50px">
            <el-button type="primary" id="loginBtn" @click="submit()">提交</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "merchantsIn",
        data() {
            return {
                //刷新
                key:0,
                //营业执照图片
                licenseImg: null,
                //搜索示例
                local: null,
                //锚点
                marker: null,
                //地址集合
                addList: [],
                //地址输入框文本
                text: "",
                //地图示例
                map: null,
                //加载
                loading: false,
                //信息表单
                ruleForm: {
                    //注册账号
                    username:"",
                    //注册密码
                    password:"",
                    //店铺名称
                    name: "",
                    //店铺开业时间
                    registerDate: "",
                    //联系人
                    contact:"",
                    //联系电话
                    contactPhone:"",
                    //入驻城市
                    inCity:"",
                    //营业执照
                    licenseFile: null,
                    //店铺图片集合
                    imgList:[],
                    //详细地址
                    address:"",
                },
                //必填校验
                rules: {
                    username: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    password: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    name: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    registerDate: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    contact: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    contactPhone: [
                        {required: true, message: '请输入', trigger: 'change'}
                    ],
                    inCity: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                    licenseFile: [
                        {required: true, message: '请选择', trigger: 'change'}
                    ],
                },
                //城市集合
                cityList: [],
            }
        },
        created() {
            this.init();
        },
        mounted() {
            this.initMap();
        },
        methods: {
            submit() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认提交？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let formData=new FormData();
                            formData.append("username",this.ruleForm.username);
                            formData.append("password",this.ruleForm.password);
                            formData.append("name",this.ruleForm.name);
                            formData.append("registerDate",this.ruleForm.registerDate);
                            formData.append("contact",this.ruleForm.contact);
                            formData.append("contactPhone",this.ruleForm.contactPhone);
                            formData.append("inCity",this.ruleForm.inCity);
                            formData.append("lat",this.ruleForm.lat);
                            formData.append("lng",this.ruleForm.lng);
                            formData.append("address",this.ruleForm.address);
                            formData.append("licenseFile",this.ruleForm.licenseFile);
                            for (let i = 0; i < this.ruleForm.imgList.length; i++) {
                                formData.append("imgList",this.ruleForm.imgList[i]);
                            }
                            this.$HttpService.req({
                                url: "/info-merchants/notLogin/merchantsIn",
                                method: "post",
                                data: formData,
                            }).then(res=>{
                                this.ruleForm=this.$options.data().ruleForm;
                                this.licenseImg=null;
                                this.key++;
                                this.$message.success('入驻申请提交成功，等待管理员审核！');
                            })
                        })
                    }
                });
            },


            //删除店铺图片函数
            handleRemove(file,fileList){
                this.ruleForm.imgList = fileList.map(x=>x.raw);
            },

            //店铺图片改变函数
            listOnChange(file,fileList){
                const isJPG = file.raw.type === 'image/jpeg';
                const isLt10M = file.raw.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return;
                }
                if (!isLt10M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                    return;
                }
                this.ruleForm.imgList = fileList.map(x=>x.raw);
            },
            onChange(file) {
                const isJPG = file.raw.type === 'image/jpeg';
                const isLt10M = file.raw.size / 1024 / 1024 < 10;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return;
                }
                if (!isLt10M) {
                    this.$message.error('上传头像图片大小不能超过 10MB!');
                    return;
                }
                this.licenseImg = URL.createObjectURL(file.raw);
                this.ruleForm.licenseFile = file.raw;
            },

            addressChange(id) {
                let obj = this.addList.filter(x => x.id == id)[0];
                var point = new BMapGL.Point(obj.point.lng, obj.point.lat);
                //设置中心点
                this.map.centerAndZoom(point, 15);
                //清楚标记点
                this.map.clearOverlays();
                //添加新的点
                this.marker = new BMapGL.Marker(point);
                this.map.addOverlay(this.marker);
                this.ruleForm.address = obj.address;
                this.ruleForm.lng = obj.point.lng;
                this.ruleForm.lat = obj.point.lat;
            },

            remoteMethod(query) {
                this.text = query;
                this.local.search(query);
                this.loading = true;
            },
            initMap() {
                let vm = this;
                this.map = new BMapGL.Map('container');
                var point = new BMapGL.Point(116.331, 39.923);
                this.map.centerAndZoom(point, 15);
                this.map.enableScrollWheelZoom(true);
                this.marker = new BMapGL.Marker(point);
                this.map.addOverlay(this.marker);
                var options = {
                    onSearchComplete: results => {
                        // 判断状态是否正确
                        if (vm.local.getStatus() == BMAP_STATUS_SUCCESS) {
                            var s = [];
                            vm.addList = results._pois.map(x => {
                                return {
                                    address: x.address,
                                    city: x.city,
                                    title: x.title,
                                    point: x.point,
                                    id: this.$util.uuid(),
                                }
                            })

                            vm.loading = false;
                        }
                    }
                };
                this.local = new BMapGL.LocalSearch(this.map, options);
            },
            //初始化方法
            init() {
                //获取系统上线城市
                this.$HttpService.get("/common/getItem/online_area").then(res => {
                    this.cityList = res;
                })
            }
        }
    }
</script>

<style lang="scss">
    .enterpriseIn {
        width: 70%;
        margin: 0 auto;
        padding-top: 20px;
        border: 1px solid #f2f2f2;
        .title {
            font-weight: bolder;
            font-size: 25px;
            color: black;
            text-align: center;
        }

        .ruleForm {
            width: 70%;
            margin: 30px auto;
        }
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>
